<template>
  <div class="addScoringResultPage">
    <h1 style="margin-bottom: 32px">设置评分</h1>
    <a-form
      style="max-width: 480px"
      label-align="left"
      auto-label-width
      :model="form"
      @submit="handleSubmit"
    >
      <a-form-item label="应用 ID">
        {{ appId }}
      </a-form-item>
      <a-form-item v-if="updateId" label="修改评分 ID">
        {{ updateId }}
      </a-form-item>
      <a-form-item field="resultName" label="结果名称">
        <a-input v-model="form.resultName" placeholder="请输入结果名称" />
      </a-form-item>
      <a-form-item field="resultDesc" label="结果描述">
        <a-input v-model="form.resultDesc" placeholder="请输入结果的描述" />
      </a-form-item>

      <a-form-item field="resultProp" label="结果集">
        <a-input-tag
          v-model="form.resultProp"
          :style="{ width: '320px' }"
          placeholder="请输出结果集，按回车确认"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="resultScoreRange" label="结果得分范围">
        <a-input-number
          v-model="form.resultScoreRange"
          placeholder="请输入结果得分范围"
        />
      </a-form-item>
      <a-form-item field="resultPicture" label="结果图片">
        <PictureUploader
          :value="form.resultPicture"
          :on-change="(value) => (form.resultPicture = value)"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 120px"
          >提交
        </a-button>
      </a-form-item>
    </a-form>
    <h2 style="margin-bottom: 32px">评分管理</h2>
    <ScoringResultTable
      :app-id="appId"
      :do-update="doUpdate"
      ref="tableRef"
    ></ScoringResultTable>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults } from "vue";
import {
  addScoringResultUsingPost,
  editScoringResultUsingPost,
} from "@/api/scoringResultController";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { API } from "@/api/typings";
import PictureUploader from "@/components/PictureUploader.vue";
import ScoringResultTable from "@/views/add/compent/ScoringResultTable.vue";

interface Props {
  appId: string;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
});

const router = useRouter();

// appDesc?: string;
// appIcon?: string;
// appName?: string;
// appType?: number;
// scoringStrategy?: number;
const form = ref({
  resultDesc: "",
  resultName: "",
  resultPicture: 0,
} as API.ScoringResultAddRequest);

const updateId = ref<any>();

const tableRef = ref();

const doUpdate = (scoringResult: API.ScoringResultVO) => {
  updateId.value = scoringResult.id;
  form.value = scoringResult;
};
// /**
//  * 加载数据
//  */
// const loadData = async () => {
//   if (!props.id) {
//     return;
//   }
//   const res = await getScoringResultVoByIdUsingGet({
//     id: props.id,
//   });
//   if (res.data.code === 0 && res.data.data) {
//     oldScoringResult.value = res.data.data as any;
//     form.value = res.data.data;
//   } else {
//     message.error("获取数据失败，" + res.data.message);
//   }
// };

// /**
//  * 监听 searchParams 变量，改变时触发数据的重新加载
//  */
// watchEffect(() => {
//   loadData();
// });

/**
 * 提交
 */
const handleSubmit = async () => {
  if (!props.appId) {
    return;
  }
  let res: any;
  // 如果是修改
  if (updateId.value) {
    res = await editScoringResultUsingPost({
      id: updateId.value as any,
      ...form.value,
    });
  } else {
    // 创建
    res = await addScoringResultUsingPost({
      appId: props.appId as any,
      ...form.value,
    });
  }
  if (res.data.code === 0) {
    message.success("操作成功");
  } else {
    message.error("操作失败，" + res.data.message);
  }
  if (tableRef.value) {
    tableRef.value.loadData();
    updateId.value = undefined;
  }
};
</script>

<style scoped>
.addScoringResultPage a-form-item {
  margin-bottom: 20px;
}

.addScoringResultPage h1 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.addScoringResultPage a-button {
  margin-top: 50px;
}
</style>
